<script setup>
import {
  Star, Search
} from '@element-plus/icons-vue'
</script>

<template>
  <div class="song-card-box">
    <div class="album-container">
      <el-image class="album" :src="calcImgUrl(albumId)" @click="play" />
    </div>
    <div class="description-container">
      <div>{{ songName }}</div>
      <div>{{ singer }} - {{ albumName }}</div>
      <!-- <div>八度空间</div> -->
    </div>
    <div class="details">
      <!-- <el-button @click="goToMusic">详情</el-button> -->
      <el-button :icon="Search" circle @click="goToMusic"/>      
    </div>
    <div class="like">
      <!-- <el-button @click="likeMusic">喜欢</el-button> -->
      <el-button :icon="Star" circle @click="likeMusic"/>
    </div>
  </div>
</template>
  
<script>

export default {
  name: 'songCard',
  props: {
    songId: { type: Number },
    songName: { type: String },
    singer: { type: String },
    albumName: { type: String },
    albumId: { type: Number }
  },
  data() {
    return {
      imgUrl: "",
    }
  },
  methods: {
    calcImgUrl(id) {
      // return require("src/assets/albums/" + id + ".jpeg")
      return new URL("../assets/albums/" + id + ".jpeg", import.meta.url).href
    },
    goToMusic() {
      // console.log('this.songid: ', this.songId, 'this.albumid: ', this.albumId)
      this.$emit('goToMusic', this.songId, this.albumId)
    },
    likeMusic() {
      // console.log('emitted')
      this.$emit('likeMusic', this.songId)
    },
    play() {
      console.log('play', this.songId)
      this.$emit('playMusic', this.songId)
    }
  }
}
</script>
  
<style scoped>
.song-card-box {
  height: 120px;
  width: 450px;
  /* border: 1px solid grey; */
  border-radius: 8px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  box-shadow: var(--el-box-shadow);
  padding: 4px 8px 4px 20px;
  margin: 16px;
}

.description-container {
  margin-left: 20px;
  width: 200px;
}

.el-image:hover {
  cursor: pointer;
}

.details {
  margin-left: 20px;
  margin-right: 20px;
}

.like {
  /* margin-left: 20px; */
  margin-right: 20px;
}

.album {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.album:hover {
  opacity: 0.8;
}

/* .album:hover::after {
  content: url('../assets/play.jpg');
  position: absolute;
  transform: translateX(-80px);
  opacity: 0.3;
} */
</style>